<template>
    <div>
        <NavTop></NavTop>
        <div style="width: 1400px;margin: auto">
            <el-table ref="multipleTableRef" :data="store.cartData" style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" :selectable="selectable" width="55" />
                <el-table-column property="id" label="商品bh" width="120" />
                <el-table-column property="name" label="商品名称" width="120" />
                <el-table-column property="onlineprice" label="价格" />
                <el-table-column property="num" label="数量" />
                <el-table-column property="total" label="总金额" />
                <el-table-column align="right">
                    <template #header>
                        <el-input v-model="search" size="small" placeholder="Type to search" />
                    </template>
                    <template #default="scope">
                        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
                            Delete
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="margin-top: 20px;">
                <el-button @click="buy()">购买</el-button>

            </div>


        </div>
    </div>
</template>
<script>
import NavTop from '@/components/NavTop.vue';
import { userGoodsStore } from '../../store/goods.js';


export default {
    components: {
        NavTop

    },
    data() {
        return {
            multipleTableRef: null,
            multipleSelection: [],
            store: userGoodsStore(),
            cartData: JSON.parse(sessionStorage.getItem('cart')),
            time: new Date()
        }
    },
    methods: {

        handleSelectionChange(val) {
            this.multipleSelection = val

        },
        handleDelete(index) {
            this.cartData.splice(index, 1)//删除当前行数据,注意只在数组中删除,sessionStorage没有变化
            //更新session数据
            sessionStorage.setItem('cart', JSON.stringify(this.cartData))
        },
        buy() {
            //打印订单号,看看是否ok
            console.log(this.orderID)
            //统计商品的总金额和总数量
            let num=0
            let sum=0
            //从选中的商品进行遍历循环,把每个商品的数量和金额进行相加
            this.multipleSelection.map(v=>{
                num +=v.num
                sum +=parseInt(v.total)
            })
            //打印检查数据是否正确
            console.log("num"+num)
            console.log("num"+sum)
        
        }

    },
    computed: {
        orderID() {
            //生成订单号
            let month=this.time.getMonth()+1
            return this.time.getFullYear().toString() +
             month.toString() + 
             this.time.getDate().toString() + 
             Math.random().toString().slice(2, 10)
        }
    }


}


</script>